<template>
  <div class="search-page">
    <div class="search-bar">
      <van-icon name="arrow-left" @click="goBack" />
      <input v-model="keyword" placeholder="搜索音乐、视频、播客、歌词" />
      <van-icon name="search" />
    </div>
    <div class="search-history">
      <div class="section-title">搜索历史</div>
      <div class="history-list">
        <van-tag v-for="item in history" :key="item" type="default" round>{{ item }}</van-tag>
      </div>
    </div>
    <div class="guess-like">
      <div class="section-title">猜你喜欢</div>
      <div class="like-list">
        <van-tag v-for="item in guessList" :key="item" type="success" round>{{ item }}</van-tag>
      </div>
    </div>
    <div class="hot-list">
      <div class="section-title">热搜榜 <van-icon name="play-circle-o" /></div>
      <div class="hot-flex">
        <div class="hot-item" v-for="(item, idx) in hotList" :key="item.title">
          <span class="hot-index" :class="{hot: idx < 3}">{{ idx+1 }}</span>
          <span class="hot-title">{{ item.title }}</span>
          <span v-if="item.tag" class="hot-tag">{{ item.tag }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const keyword = ref('')
const history = ref(['毛不易', '一路生花', 'Love Me No More', '周杰伦', '晴天', '稻香', '青花瓷', '七里香', '夜曲', '发如雪', '东风破', '菊花台', '千里之外', '听妈妈的话', '简单爱', '龙卷风', '星晴', '可爱女人', '黑色幽默'])
const guessList = ref(['东北民谣', '世间美好与你环环相扣', '错位时空', '天下', '哑语', 'Theme From Schindler\'s List', '平凡之路', '演员', '起风了', '消愁', '借', '盛夏', '二零三', '感觉自己是巨星', '如果有一天我变得很有钱', '巨星', '深夜一角', '等', '小王', '呓语'])
const hotList = ref([
  { title: '你到底在为谁等待', tag: '爆' },
  { title: '爱情讯息', tag: '热' },
  { title: '鼻塞' },
  { title: '两难' },
  { title: '我们的明天' },
  { title: '下一个天亮' },
  { title: '天后' },
  { title: '嗨好' },
  { title: '南部Southside' },
  { title: '晴天', tag: '热' },
  { title: '稻香' },
  { title: '青花瓷' },
  { title: '七里香' },
  { title: '夜曲' },
  { title: '发如雪' },
  { title: '东风破' },
  { title: '菊花台' },
  { title: '千里之外' },
  { title: '听妈妈的话' },
  { title: '简单爱' },
  { title: '龙卷风' },
  { title: '星晴' },
  { title: '可爱女人' },
  { title: '黑色幽默' },
  { title: '平凡之路' },
  { title: '演员' },
  { title: '起风了' },
  { title: '消愁' },
  { title: '借' },
  { title: '盛夏' },
  { title: '二零三' },
  { title: '感觉自己是巨星' },
  { title: '如果有一天我变得很有钱' },
  { title: '巨星' },
  { title: '深夜一角' },
  { title: '等' },
  { title: '小王' },
  { title: '呓语' }
])
function goBack() { router.back() }
</script>
<style scoped>
.search-page {
  background: #181818;
  min-height: 100vh;
  color: #fff;
  padding-bottom: 32px;
}
.search-bar {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #222;
  border-radius: 0 0 12px 12px;
}
.search-bar input {
  flex: 1;
  margin: 0 12px;
  background: #333;
  border: none;
  color: #fff;
  border-radius: 6px;
  padding: 8px 12px;
}
.section-title {
  font-weight: bold;
  margin: 18px 0 8px 16px;
  font-size: 15px;
}
.history-list, .like-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 16px;
}
.hot-list {
  margin-top: 18px;
}
.hot-flex {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 16px;
}
.hot-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hot-index {
  width: 22px;
  display: inline-block;
  text-align: center;
  font-weight: bold;
}
.hot-index.hot {
  color: #ff4d4f;
}
.hot-title {
  font-size: 15px;
}
.hot-tag {
  background: #ff4d4f;
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
  padding: 2px 6px;
  margin-left: 4px;
}
</style> 